{% macro authorCard(authorId) %}

{% set authorTitle = ('i18n.authors.' + authorId + '.title') | i18n(locale) %}
{% set authorDescription = ('i18n.authors.' + authorId + '.description') | i18n(locale) %}
{% set authorImage = authorsData[authorId].image %}

<div class="blog-card rounded-lg pad-300 md:pad-400 width-full text-align-center">
  {% if authorImage %}
    <div class="gap-bottom-300">
      <a translate="no" class="display-block" href="/authors/{{ authorId }}/">
        {% Img
          src=authorImage,
          alt=authorTitle,
          height="192",
          width="192",
          class="rounded-full display-inline-block",
          sizes="(min-width: 481px) 192px, 128px",
          options={minWidth: 128}
        %}
      </a>
    </div>
  {% endif %}

  <h2 class="type--h5">
    <a translate="no" class="surface display-inline-flex color-text" href="/authors/{{ authorId }}">
      {{ authorTitle  }}
    </a>
  </h2>

  <p class="type--caption gap-top-200">
    {{ authorDescription | md | safe }}
  </p>
</div>
{% endmacro %}
